import React, { useState } from "react";
import {
  AppstoreOutlined,
  ContainerOutlined,
  DesktopOutlined,
  MailOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Button, Menu } from "antd";
import Routers from "../../routers";
import { NavLink, Outlet } from "react-router-dom";

type MenuItem = Required<MenuProps>["items"][number];

const Index: React.FC = () => {
  const items: any = Routers[3].children?.map((item) => ({
    key: item.path,
    label: <NavLink to={item.path}>{item.meate}</NavLink>,
    icon: item.icon,
    children: item?.children?.map((item) => ({
      key: item.path,
      label: <NavLink to={item.path}>{item.meate}</NavLink>,
    })),
  }));
  const [collapsed, setCollapsed] = useState(false);

  const toggleCollapsed = () => {
    setCollapsed(!collapsed);
  };

  return (
    <div>
      <div style={{ width: "auto" }}>
        <Menu
          defaultSelectedKeys={["/home/home"]}
          defaultOpenKeys={["sub1"]}
          mode="inline"
          theme="dark"
          inlineCollapsed={collapsed}
          items={items}
        />
      </div>
    </div>
  );
};
export default Index;
